import React, {useRef, useState} from 'react';
import {View, Image, StyleSheet} from 'react-native';
import Carousel from 'react-native-reanimated-carousel';
import Animated, {
  interpolate,
  interpolateColor,
  useAnimatedStyle,
} from 'react-native-reanimated';
import {TAnimationStyle} from 'react-native-reanimated-carousel/lib/typescript/layouts/BaseLayout';

const Swiper = ({images, transitionType, width, height, playWay}: any) => {
  const carouselRef = useRef(null);
  // transitionType 0随机 1旋转 2渐入 3渐变 4放大 5斜入（组件编码： ZJ00011 班牌图片分类 ）
  let type = transitionType;
  if (type === 0) {
    type = Math.floor(Math.random() * 5) + 1;
  }
  console.log('type', type);
  const animationStyle: TAnimationStyle = React.useCallback((value: number) => {
    'worklet';
    if (type === 1) {
      const zIndex = interpolate(value, [-1, 0, 1], [10, 20, 30]);
      const scale = interpolate(value, [-1, 0, 1], [1.25, 1, 0.25]);
      const rotateZ = `${interpolate(value, [-1, 0, 1], [-45, 0, 45])}deg`;
      const translateX = interpolate(value, [-1, 0, 1], [-width, 0, width]);
      const opacity = interpolate(value, [-0.75, 0, 1], [0, 1, 0]);

      return {
        transform: [{scale}, {rotateZ}, {translateX}],
        zIndex,
        opacity,
      };
    } else if (type === 2) {
      // 实现渐入动画效果
      const zIndex = interpolate(value, [-1, 0, 1], [10, 20, 30]);
      const translateX = interpolate(value, [-2, 0, 1], [-width, 0, width]);

      return {
        transform: [{translateX}],
        zIndex,
      };
    } else if (type === 4 || type === 5) {
      // const zIndex = interpolate(value, [-1, 0, 1], [10, 20, 30]);
      // const translateX = interpolate(value, [-2, 0, 1], [-width, 0, width]);
      //
      // return {
      //   transform: [{translateX}],
      //   zIndex,
      // };
      const zIndex = interpolate(value, [-1, 0, 1], [10, 20, 30]);
      const scale = interpolate(value, [-1, 0, 1], [1.25, 1, 0.25]);
      const opacity = interpolate(value, [-0.75, 0, 1], [0, 1, 0]);

      return {
        transform: [{scale}],
        zIndex,
        opacity,
      };
    }
    return {};
  }, []);
  const renderItem = ({item, animationValue}: any) => {

    const maskStyle = useAnimatedStyle(() => {
      const backgroundColor = interpolateColor(
        animationValue.value,
        [-1, 0, 1],
        ['#000000dd', 'transparent', '#000000dd'],
      );

      return {
        backgroundColor,
      };
    }, [animationValue]);
    return (
      <Animated.View style={[styles.item, maskStyle]}>
        <Image source={{uri: item}} style={styles.image} resizeMode={'stretch'}/>
      </Animated.View>
    );
  };
  return (
    <Carousel
      ref={carouselRef}
      data={images}
      width={width}
      height={height}
      scrollAnimationDuration={1000}
      autoPlayInterval={5000}
      loop={true}
      autoPlay={playWay === 0}
      renderItem={renderItem}
      customAnimation={animationStyle}
    />
  );
};

const styles = StyleSheet.create({
  item: {
    // 样式设置
    width: '100%',
    backgroundColor: 'green',
    height: '100%', // 设置图片高度
    overflow:'hidden'
  },
  image: {
    width: '100%',
    backgroundColor: 'blue',
    height: '100%', // 设置图片高度
  },
});

export default Swiper;
